<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue 倒计时</title>
</head>

<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <div id="Application">
        <input type="text" v-model="a" />{{a}}
        <input type="text" v-model="b" />{{b}}
        <div>剩余支付时间：{{count}}</div>
    </div>
    <script>
        const App = Vue.createApp({
            setup() {
                const a = Vue.ref("");
                const b = Vue.ref("");
                let count = Vue.ref("");
                let seconds = Vue.ref(86400);//10天时间
                // 天 时 分 秒 格式化函数
                const countDown = () => {
                    let d = parseInt(seconds.value / (24 * 60 * 60))
                    d = d < 10 ? "0" + d : d
                    let h = parseInt(seconds.value / (60 * 60) % 24);
                    h = h < 10 ? "0" + h : h
                    let m = parseInt(seconds.value / 60 % 60);
                    m = m < 10 ? "0" + m : m
                    let s = parseInt(seconds.value % 60);
                    s = s < 10 ? "0" + s : s
                    count.value = d + '天' + h + '时' + m + '分' + s + '秒'
                };
                //定时器没过1秒参数减1
                const Time = () => {
                    setInterval(() => {
                        seconds.value -= 1
                        countDown()
                    }, 1000)
                };
                Time();
                return {
                    a,
                    b,
                    count,
                };
            },
        });
        App.mount("#Application");
    </script>
</body>

</html>